import React, { Component } from 'react';
import { ListView, PullToRefresh } from 'antd-mobile';
import ReactDOM from 'react-dom';

import './YwxSectionView.less';


export default class YwxListView extends Component {

    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            getSectionData: (dataBlob, sectionID) => dataBlob[sectionID],
            getRowData: (dataBlob, sectionID, rowID) => dataBlob[rowID],
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
            rowHasChanged: (row1, row2) => row1 !== row2
        });

        this.state = {
            refreshing: false,
            dataSource,
            height: document.documentElement.clientHeight * 3 / 4
        }
    }

    componentDidMount() {
        this.renderList();
    }

    renderList = (props = this.props) => {

        let dataBlob = {},
            sectionIDs = [],
            rowIDs = [],
            list = [];

        let todyList = [];
        let oldList = [];
        props.list.forEach(item => {
            item.today ? todyList.push(item) : oldList.push(item);
        });
        let data = [
            { title: '今日记录', list: todyList },
            { title: '以往记录', list: oldList },
        ]

        for (let i = 0; i < data.length; i++) {
            sectionIDs.push(i);
            dataBlob[i] = data[i].title;
            list = data[i].list;
            rowIDs[i] = [];

            for (let j = 0; j < list.length; j++) {
                let rowName = `${i}-${j}`
                rowIDs[i].push(rowName);
                dataBlob[rowName] = list[j];
            }

        }







        const height = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.getBoundingClientRect().top;
        let dataSource = this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs);
        this.setState({
            isLoading: false,
            height,
            dataSource
        })
    }

    componentWillReceiveProps(nextProps) {
        this.renderList(nextProps);
    };

    onRefresh = () => {
        this.props.onRefresh && this.props.onRefresh();
    }

    onEndReached = () => {
        if (this.state.isLoading) {
            return
        }

        this.setState({
            isLoading: true
        })
        this.props.onEndReached && this.props.onEndReached();
    }

    render() {

        let footerText = '';
        if (this.props.noMore) {
            footerText = '没有更多了~'
        } else if (this.state.isLoading) {
            footerText = '正在加载...'
        }

        return (
            <div className='section-list'>
                <ListView
                    ref={el => this.lv = el}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    renderHeader={() => (
                        this.props.header
                    )}
                    renderFooter={() => (
                        <div style={{ textAlign: 'center' }}>
                            {footerText}
                        </div>)}
                    dataSource={this.state.dataSource}
                    renderSectionHeader={this.props.renderSectionHeader}
                    renderRow={this.props.renderRow}
                    pageSize={this.props.pageSize}
                    renderSeparator={this.props.renderSeparator}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={300}
                    scrollRenderAheadDistance={500}
                    pullToRefresh={
                        <PullToRefresh
                            damping={30}
                            refreshing={this.props.refreshing}
                            onRefresh={this.onRefresh}
                        />
                    }
                />
            </div>
        );
    }
}